<template>
  <ContentWrap>
    <el-table :data="tableData" :stripe="true" :show-overflow-tooltip="true">
      <el-table-column prop="fiberOrderNumber" align="center" width="150" label="配纤编号" />
      <el-table-column prop="workOrder" align="center" width="180" label="工单编号" />
      <el-table-column prop="totalCoreCount" align="center" label="成缆芯数" />
      <el-table-column prop="childCoreCount" align="center" label="子缆" />
      <el-table-column prop="childInnerCount" align="center" label="子缆内芯数" />
      <el-table-column prop="totalCore" align="center" label="承缆段数" />
      <el-table-column prop="dkm" align="center" label="段公里" />
      <el-table-column prop="statDkm" width="180" align="center" label="汇总成缆公里" />

      <el-table-column prop="childInnerCount" align="center" label="支持点个数">
        <template #default="{ row }">
          {{ row.childInnerCount > 1 ? row.childInnerCount - 1 : '' }}
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="200">
        <template #default="{ row }">
          <el-button
            size="small"
            style="background-color: #8660fd; color: #fff"
            @click="handleEdit(row)"
            >配纤
          </el-button>
          <!-- <el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="fetchData"
    />
  </ContentWrap>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'
import * as dataSourceConfigApi from '@/api/opticore/fiber/workorder'
import { useRouter } from 'vue-router'

const router = useRouter()

// 新增状态映射
const statusMap = {
  processing: '进行中',
  completed: '已完成',
  cancelled: '已取消'
}

const processModesMap = {
  mode1: '模式1',
  mode2: '模式2'
}

// 表格数据
const tableData = ref([])
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  name: null,
  sex: null,
  createTime: []
})
// 字段描述对象
const fieldDescriptions = {
  id: '主键ID',
  fiber_order_number: '配纤单号',
  work_order: '工单',
  total_core_count: '成端芯数',
  tight_outer_count: '紧套数量',
  tube_count: '管数',
  process_mode: '流程模式',
  status: '状态',
  push_pull_definition: '推拉定义',
  finished_quantity: '成端数量'
}

// API 请求函数
const fetchData = async () => {
  try {
    const data = await dataSourceConfigApi.getFiberOrderList()
    total.value = data.length
    tableData.value = data
    console.log('=====', data)
  } catch (error) {
    ElMessage.error('获取数据失败')
  }
}

const handleEdit = (row) => {
  console.log('===调整==')
  console.log('row', row)
  router.push({
    path: '/opticore/fiber/build',
    query: { workOrder: row.workOrder }
  })
}

const handleDelete = (row) => {
  ElMessageBox.confirm('确认删除该记录吗？', '提示', {
    type: 'warning'
  }).then(async () => {
    try {
      await axios.delete(`/api/fiber-orders/${row.id}`)
      ElMessage.success('删除成功')
      fetchData()
    } catch (error) {
      ElMessage.error('删除失败')
    }
  })
}

// 页面加载时获取数据
onMounted(() => {
  fetchData()
})
</script>

<style>
#app {
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
  justify-content: center;
  margin: 0 auto;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: auto;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
